<template>
  <div>
    <h1>App</h1>
    <h2>{{ $route.fullPath }}</h2>
    <ul>

      <li>
        <RouterLink to="/user">/user</RouterLink>
      </li>
      <li>
        <RouterLink to="/user/profile">/user/profile</RouterLink>
      </li>
      <li>
        <RouterLink to="/user/posts">/user/posts</RouterLink>
      </li>

      <li>
        <RouterLink to="/card">/card</RouterLink>
      </li>
      <li>
        <RouterLink :to="{ name: 'header' }">/card/header</RouterLink>
      </li>
      <li>
        <RouterLink to="/card/body">/card/body</RouterLink>
      </li>
    </ul>
    <RouterView></RouterView>
  </div>
</template>
<script setup>
import { watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();

// watch(() => route.query.name, (a, b) => {
watch(() => route.params.id, (a, b) => {
  console.log(a, b);
});

</script>
<style>
div {
  border: solid;
  padding: 20px;
}
</style>
